<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-header">近期30天接待情况</div>
        <div class="layui-card-body">

            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                 lay-filter="LAY-index-dataview">
                <div carousel-item id="LAY-index-dataview">
                    <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                    <!--  <div></div>-->
                </div>
            </div>

        </div>
    </div>

</div>


<script>

    //区块轮播切换
    layui.use(['carousel', 'echarts','admin'], function () {
        var $ = layui.$
            , carousel = layui.carousel
            , element = layui.element
            , admin = layui.admin
            , device = layui.device();

        //轮播切换
        $('.layadmin-carousel').each(function () {
            var othis = $(this);
            carousel.render({
                elem: this
                , width: '100%'
                , arrow: 'none'
                , interval: othis.data('interval')
                , autoplay: othis.data('autoplay') === true
                , trigger: (device.ios || device.android) ? 'click' : 'hover'
                , anim: othis.data('anim')
            });
        });

        element.render('progress');


        var echartsApp = [], options = [
                //今日流量趋势
                {
                    title: {
                        text: '近期{$show_day+1}天接待情况',
                        subtext: '',
                        x: 'right',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['消息数量', '访客数量','评价数量']
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        boundaryGap: true,
                        data: {$x_time|json_encode|raw}
                }],
            yAxis: [{
                type : 'value'
            }],
            series: [{
                name:'消息数量',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data: {$series1|json_encode|raw},
                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            },{
                name:'访客数量',
                type:'line',
                smooth:true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data: {$series2|json_encode|raw},
                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            },{
                name:'评价数量',
                type:'line',
                smooth:true,
                data: {$series3|json_encode},
                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                },
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }
            }]
    },
    ]
    ,
        elemDataView = $('#LAY-index-dataview').children('div')
            , renderDataView = function (index) {
            echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
            echartsApp[index].setOption(options[index]);
            //window.onresize = echartsApp[index].resize;
            admin.resize(function () {
                echartsApp[index].resize();
            });
        };


        //没找到DOM，终止执行
        if (!elemDataView[0]) return;


        renderDataView(0);

        //监听数据概览轮播
        var carouselIndex = 0;
        carousel.on('change(LAY-index-dataview)', function (obj) {
            renderDataView(carouselIndex = obj.index);
        });

        //监听侧边伸缩
        layui.admin.on('side', function () {
            setTimeout(function () {
                renderDataView(carouselIndex);
            }, 300);
        });

        //监听路由
        layui.admin.on('hash(tab)', function () {
            layui.router().path.join('') || renderDataView(carouselIndex);
        });
    });



</script>
